<template>
	<view class="register_main">
		<view class="register_logo">
			<image src="../../../static/image/logo.png" mode=""></image>
		</view>
		<view class="register_welcome">
			欢迎来到文玩商城
		</view>
		<view class="register_tips">
			赶快登录逛逛吧！
		</view>
		<view class="register_content">
			<view class="account_info pr">
				<view class="account_info_title">
					登录账户
				</view>
				<view class="account_info_input">
					<input type="text" value="" v-model="phone" placeholder-style="font-size:14px;color:#999999;" placeholder="请输入登录账户" />
				</view>
				<image src="@/static/image/iphoneDelete.png" mode="" class="del_phone pa" @click="delPhone()"></image>
			</view>
			<view class="account_info account_password">
				<view class="account_info_title">
					密码
				</view>
				<view class="account_info_input">
					<input type="text" value="" v-model="password" placeholder-style="font-size:14px;color:#999999;" placeholder="请输入密码" />
				</view>
			</view>
			<view :class="loginClass" @click="submit()">
				登录
			</view>
		</view>
		<view class="register_redirect">
			<text @click="handleToRegister">注册账号</text>
			<text>|</text>
			<text @click="handleToResetPassword">忘记密码?</text>
		</view>
	</view>
</template>

<script>
	import { isvalidPhone, isvalidPassword } from '../../../utils/validate.js'
	export default {
		name: 'login',
		data() {
			return {
				phone: '', // 手机号
				password: '', // 密码
				loginClass: 'btns btn_opacity',
			}
		},
		onLoad() {
		},
		
		watch: {
			phone: {
				handler(val) {
					if (isvalidPhone(val)) {
						this.loginClass = 'btns'
						// if (isvalidPassword(this.password)) {
						if (this.password.length >= 6) {
							this.loginClass = 'btns'
						} else {
							this.loginClass = 'btns btn_opacity'
						}
					} else {
						this.loginClass = 'btns btn_opacity'
					}
				}
			},
			password: {
				handler(val) {
					if (isvalidPhone(this.phone)) {
						if (val.length >= 6) {
							this.loginClass = 'btns'
						} else {
							this.loginClass = 'btns btn_opacity'
						}
					} else {
						this.loginClass = 'btns btn_opacity'
					}
				}
			}
		},
		
		methods: {
			/** 跳转至注册账号页面 */
			handleToRegister() {
				uni.navigateTo({
					url:'../register/index'
				})
			},
			/** 跳转至重置密码页面 */
			handleToResetPassword() {
				uni.navigateTo({
					url:'../retrievePassword/index'
				})
			},
			/** 清空手机号 */
			delPhone() {
				this.phone = '';
			},
			/** 登录 */
			submit() {
				console.log(uni.getStorage('token'));
				/** 是否可登录 */
				if (this.loginClass.indexOf('btn_opacity') === -1) {
					let parameter = {
						account: this.phone, // 手机号
						password: this.password, // 密码
					};
					this.$post(this.api.login, parameter).then((res) => {
						/** token */
						uni.setStorageSync('token', res.data.token);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
							position: 'bottom'
						});
						/* 登陆成功，进入首页 */
						uni.switchTab({
							url:"../../index/index"
						});
					}).catch((err) => {
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "@/asset/less/base.less";
	.register_main {
		padding: 142rpx 61rpx 0;
		.register_logo {
			image {
				width: 118rpx;
				height: 118rpx;
			}
		}
		.register_welcome {
			color: #000000;
			font-size: 48rpx;
			padding-top: 18rpx;
			font-weight: 500;
		}
		.register_tips {
			color: #999999;
			font-size: 24rpx;
			padding: 14rpx 0 92rpx 0;
		}
		.register_content {
			.account_info_title {
				font-size: 36rpx;
				color: #1A1A1A;
				padding-bottom: 30rpx;
			}
			.account_info_input {
				font-size: 28rpx;
				padding-bottom: 15rpx;
				color: #999;
				border-bottom: 1px solid #F3f3f3;
			}
			.account_password {
				padding-top: 58rpx;
				padding-bottom: 90rpx;
			}
		}
		.register_redirect {
			color: #CA984F;
			font-size: 28rpx;
			padding-top: 26rpx;
			text-align: center;
			width: 320rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
		}
		.del_phone {
			width: 35rpx;
			height: 35rpx;
			right: 0rpx;
			bottom: 10rpx;
		}
	}
</style>
